import React, { Component } from "react";

import { connect } from "react-redux";

/*
  项目使用装饰器
    1. npm i @babel/plugin-proposal-decorators -D
    2. 在package.json里面修改
      "babel": {
        "presets": [
          "react-app"
        ],
        "plugins":[
          [
            "@babel/plugin-proposal-decorators",
            {"legacy":true}
          ]
        ]
      }
*/

const mapDispatchToProps = (dispatch) => {
  return {
    addItem(payload) {
      dispatch({ type: "addItem", payload });
    },
  };
};

// 装饰器的写法
// 在高阶组件的前面添加@符，@这一行要紧挨着组件的那一行

// 如果有波浪线的，在设置里面搜索js ，JS/TS › Implicit Project Config: Experimental Decorators

@connect(null, mapDispatchToProps)
class Form extends Component {
  state = {
    textValue: "",
  };

  handleChange = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };

  handleClick = () => {
    // console.log(this.state.textValue);
    this.props.addItem({
      id: new Date().getTime(),
      name: this.state.textValue,
    });
    this.setState({
      textValue: "",
    });
  };

  render() {
    return (
      <>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>添加</button>
      </>
    );
  }
}

// export default connect(null, mapDispatchToProps)(Form);
export default Form;
